<template>
  <div class="purchase-content">
    <!-- 左侧图片容器 -->
    <div class="left-image">
      <img src="/src/static/c.png" alt="设备示意图" class="purchase-img">
    </div>
    <!-- 右侧卡片容器（改为flex容器，支持换行） -->
    <div class="right-card">
      <a-card class="purchase-card">
        <div class="card-header">采购需求管理</div>
        <div class="card-content">
          接收各部门采购申请，审核需求合理性（如是否超预算、库存是否充足），汇总需求后生成采购计划，明确采购品类、数量、预算，避免盲目采购。
        </div>
      </a-card>
      <a-card class="purchase-card">
        <div class="card-header">供应商管理</div>
        <div class="card-content">
          建立供应商台账，记录资质、报价、交付周期、质量反馈等信息，定期评估供应商等级，支持新增、淘汰供应商，确保合作方优质可靠。
        </div>
      </a-card>
      <a-card class="purchase-card">
        <div class="card-header">采购合同管理</div>
        <div class="card-content">
          根据采购需求生成标准合同模板，明确价格、交付、验收、售后条款，支持合同线上审批与归档，方便查询合同履约情况，规避法律风险。
        </div>
      </a-card>
      <a-card class="purchase-card">
        <div class="card-header">采购订单管理</div>
        <div class="card-content">
          按合同生成采购订单，含物料规格、数量、交货期等，实时跟踪订单进度（如已下单、在途、待验收），异常时（如延期）及时与供应商沟通。
        </div>
      </a-card>
      <a-card class="purchase-card">
        <div class="card-header">采购验收管理</div>
        <div class="card-content">
          物料到库后，对照订单与质检标准验收，记录数量、质量情况，合格则入库并更新库存，不合格则启动退换货流程，保障采购物料合规。
        </div>
      </a-card>
      <a-card class="purchase-card">
        <div class="card-header">采购统计查询</div>
        <div class="card-content">
          多维度统计采购金额、供应商履约率、物料验收合格率等，图表可视化呈现，支持自定义查询，助力管理者把控采购成本与效率。
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
/* 最外层容器：左右布局 */
.purchase-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  flex-wrap: wrap; /* 整体在小屏幕换行 */
  min-width: 600px;
  padding: 20px;
  gap: 20px;
}

/* 左侧图片容器：固定宽度 */
.left-image {
  width: 300px;
  flex-shrink: 0; /* 不收缩，避免挤压 */
}

.purchase-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

/* 右侧卡片容器：改为flex容器，支持内部卡片换行 */
.right-card {
  display: flex;
  flex: 1; /* 占据剩余空间 */
  min-width: 300px; /* 最小宽度，避免过窄 */
  flex-wrap: wrap; /* 核心：卡片超出宽度时自动换行 */
  gap: 16px; /* 卡片之间的间距（水平+垂直） */
  padding: 10px 0; /* 上下内边距，优化边缘卡片间距 */
}

/* 单张卡片样式：限制最大宽度，触发换行 */
.purchase-card {
  flex: 1; /* 自动填充行内空间 */
  min-width: 300px; /* 最小宽度，确保内容不拥挤 */
  max-width: 350px; /* 最大宽度，超过则换行 */
  box-sizing: border-box; /* 避免padding影响宽度计算 */
}

/* 卡片标题样式 */
.card-header {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

/* 卡片内容样式 */
.card-content {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  padding: 8px 0;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  .purchase-content {
    min-width: 300px;
    flex-direction: column; /* 左右布局改为上下布局 */
    align-items: center;
  }

  .left-image {
    width: 250px;
  }

  .right-card {
    width: 90%; /* 占满屏幕宽度 */
  }

  .purchase-card {
    max-width: 100%; /* 小屏幕卡片占满宽度，不换行 */
  }
}
</style>